<template>
	<view>
		<dev-navbar title="编辑卡片"></dev-navbar>
		<dev-drag-list @change="modifySorting" :list="list" label-key="name"></dev-drag-list>
		<dev-iphone-bottom bgColor="#F5F5F5">
			<view style="text-align: center;color: #2EA7E0;font-size: 30rpx;">按住可拖动顺序</view>
		</dev-iphone-bottom>
	</view>
</template>

<script>
	import dragList from '@/pagesHome/components/drag.vue'
	import devDragList from '@/pagesHome/components/dev-drag-list.vue'
	export default {
		components: {
			devDragList
		},
		data() {
			return {
				list: [], // 传入数据的list即可
				listKey: 'name', // 需要渲染list中key的名称(例如:'name')
				height: 55, // 每个item的高度
			};
		},
		onLoad() {
			this.indicatorList();
		},
		methods: {
			//获取指标列表
			indicatorList() {
				this.$https.get(global.apiUrls.indicatorList, {
					hisUserId: global.userInfo.userId
				}).then(res => {
					console.log(res)
					if (res.data.code == 1000) {
						this.list = res.data.result;
						console.log(this.list, 'listlsit')
					}
				})
			},
			modifySorting(list) {
				this.$https.put(global.apiUrls.modifySorting,list , {
					header:{
						'Content-Type': 'application/json'
					}
				}).then(res => {
					if(res.data.code ===1000){
						this.indicatorList();
					}
				})
			},




			dragSortChange(list) {
				console.log(list)
			},


		}
	}
</script>

<style lang="scss">
	//scoped 在当前页生效 不影响子组件
	.drag-item {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.item-icon {
		position: absolute;
		left: 10px;
		display: inline-block;
		line-height: 70px;
		color: #FF5500;
	}
</style>
